<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <!-- <script src="https://cdn.jsdelivr.net/npm/zrender@4.3.0/dist/zrender.js"></script> -->
    <script src="./js/zrender.js"></script>

    <title></title>
</head>

<body>
    <div id="container" style="height: 700px; width: 800px;"></div>


    <script>
        var zr = zrender.init(document.getElementById('container'));
    

        var w = zr.getWidth();
        var h = zr.getHeight();
 //身体       
        var rect=new zrender.Rect({
    shape:{
        x:360,
        y:270,
        width:350,
        height:130,
        r:[100,100,20,20]
    },
            style: {
                fill: 'black',
                stroke: 'none',
                
            },
           
            z: 1,
        });
        //头
var head = new zrender.Ellipse({
            shape: {
                cx: w / 1.5,
                cy: h / 3,
                rx: 160,
                ry: 130
            },
            style: {
                fill: 'white',
                stroke: '#000',
                lineWidth: 10,
            },
            z:1,
        });
           //嘴巴
                var arc = new zrender.Arc({
            shape: {
                cx: 533,
                cy: 235,
                r: 47,
                startAngle: -35,
                clockwise: false,
            },
            style: {
                stroke: '#000000',
                lineWidth: 9,
            },
            z: 1,
        });

         //眼睛  
        
        var circle1=new zrender.Circle({
            shape:{
                cx:215,
                cy:-15,
                r:11
            },
            style:{
                fill:'black'
            },
            position: [w/3 , h/3],
               z:1,
        })
        //眼睛2
        var heart = new zrender.Heart({
      shape: {
        cx:300,
        cy:-40,
        width: 15,
        height: 20
      },
      style:{
         fill:'red'
      },
      position: [w/3 , h/3],
               z:1,
      // draggable: true
    });
    //左耳
    var circle2=new zrender.Circle({
            shape:{
                cx:w/2-210,
                cy:h/2-350,
                r:55
            },
            style:{
                fill:'black'
            },
            position: [w/4 , h/4],
              // z:1,
        })
        //右耳
        var circle3=new zrender.Circle({
            shape:{
                cx:w/2+48,
                cy:h/2-380,
                r:55
            },
            style:{
                fill: 'black',
             
            },
            position: [w/4, h/4],
              // z:1,
        })


    

zr.add(rect)
zr.add(head)
zr.add(arc)
zr.add(circle1)
zr.add(heart)
zr.add(circle2)
zr.add(circle3)


    </script>
</body>

</html>
